<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				width: 40px;
				height: 300px;
				border: 1px solid;
				margin: 0 auto;
				overflow: hidden;
			}

			#wrap>.inner {
				height: 600px;
				/*
				这是一个颜色渐变的过程：
				从 0px black 渐变到 10px black
				从 10px 位置的black 渐变到 10px 位置的white
				从 10px 位置的white 渐变到 20px 位置的white
				然后重复这一过程
				*/
				background-image: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px);
				/* transition: 0.3s; */
			}

			#wrap:hover .inner {
				margin-top: -300px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner"></div>
		</div>
		<script type="text/javascript">
			var inner = document.querySelector("#wrap > .inner")
			var flag = 0

			/**
			 * 这里最好是1秒钟60次，那么这里的15表示15毫秒flag增加一次。
			 */
			setInterval(function() {
				flag++
				inner.style.marginTop = -flag + "px"
				flag = flag >= 300 ? 0 : flag;
			}, 15)
		</script>
	</body>
</html>
